<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>觅易大屏数据</title>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/map.css">

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/default.css">
<link rel="stylesheet"
	href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet"
	href="static/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/site.css">

<link rel="stylesheet"
	href="static/swiper-4.3.3/dist/css/swiper.min.css">
<style>
[v-cloak] {
	display: none;
}

.des {
	padding: 10px;
	font-size: 20px;
	text-indent:40px;
}

.log {
	line-height: 20%;
	display: inline-block;
}

.demo2 li {
	color: white;
}

.tt {
	text-align: center;
	color: white;
	font-weight: bold;
	font-size: 18px;
}

.slidespan {
	display: inline-block;
	color: #fff;
	width: 33%;
	text-align: center;
}
.swiper-slide img{width:100%;height:100%;}
#zcy li{font-size: 16px;}
#sc li{font-size: 16px;}
</style>

</head>

<body>
	<div class="data" id="data" v-cloak>
		<div class="data-title">
			<div class="title-left fl"></div>
			<div class="title-center fl">{{areaname}}数据概览</div>
			<div class="title-right fr"></div>
		</div>
		<div class="data-content">
			<div class="con-left fl">
				<div class="left-top">
					<div class="info">
						<div class="info-title">地区图片展示</div>
<!-- 						<img src="img/bj-1.png" alt="" class="bj-1"> <img -->
<!-- 							src="img/bj-2.png" alt="" class="bj-2"> -->

<!-- 						<div -->
<!-- 							style="position: absolute; bottom: 0; width: 100%; height: 20%; background: rgba(0, 0, 0, 0.5);"> -->
<!-- 							<span class="log">户数</span> <span class="log">人口</span> <span -->
<!-- 								class="log">种植面积</span> -->
<!-- 						</div> -->


						<div class="swiper-container" style="width: 100%;height: 100%;">
							<div class="swiper-wrapper">
								<div class="swiper-slide">
									<img src="img/03.jpg">
								</div>
								<div class="swiper-slide">
									<img src="img/04.jpg" >
								</div>
								<div class="swiper-slide">
									<img src="img/05.jpg" >
								</div>
								<div class="swiper-slide">
									<img src="img/06.jpg">
								</div>
								<div class="swiper-slide">
									<img src="img/07.jpg">
								</div>
							</div>
							<!-- Add Pagination -->
							<div class="swiper-pagination"></div>
						<!-- 	<div class="swiper-button-next"></div>
								<div class="swiper-button-prev"></div> -->
						</div>
		
			
					</div>
					<div class="top-bottom">
						<div class="title">{{areaname}}介绍</div>
						<img src="img/bj-1.png" alt="" class="bj-1"> <img
							src="img/bj-2.png" alt="" class="bj-2"> <img
							src="img/bj-3.png" alt="" class="bj-3"> <img
							src="img/bj-4.png" alt="" class="bj-4">
						<div style="color: white;">
							<p class="des">姚安县是云南省楚雄彝族自治州下辖的县之一。县境位于云南省楚雄彝族自治州西北部，东邻牟定县，南枕南华县，北接大姚县，西与大理州祥云县隔一泡江相望，总面积1803平方千米。</p>
							 <p class="des">姚安县县城距昆明230公里，距楚雄75公里，距四川省攀枝花市190公里。2011年姚安县总人口为19.77万，在楚雄州2010年各市县人口排名位列第八位。</p> 
						</div>
						<!-- <div id="echarts_1" class="charts"></div> -->
					</div>
				</div>
				<div class="left-bottom">
					<div class="title">农户贫困比例统计</div>
					<img src="img/bj-1.png" alt="" class="bj-1"> <img
						src="img/bj-2.png" alt="" class="bj-2"> <img
						src="img/bj-3.png" alt="" class="bj-3"> <img
						src="img/bj-4.png" alt="" class="bj-4">
					<div id="echarts_1" class="charts"></div>
				</div>
			</div>
			<div class="con-center fl">

				<div class="cen-top" id="map1"></div>

				<div class="cen-bottom"
					style="float: left; width: 45%; margin-left: 3%">
					<div class="title">蔬菜价格</div>
					<img src="img/bj-1.png" alt="" class="bj-1"> <img
						src="img/bj-2.png" alt="" class="bj-2"> <img
						src="img/bj-3.png" alt="" class="bj-3"> <img
						src="img/bj-4.png" alt="" class="bj-4">
					<div class="panel-heading row">
						<div class="col-md-4 tt">名称</div>
						<div class="col-md-4 tt">价格</div>
						<div class="col-md-4 tt">日期</div>
					</div>


					<div class="txtMarquee-top">
						<div class="hd">
							<a class="next"></a> <a class="prev"></a>
						</div>
						<div class="bd">
							<ul class="infoList" id="sc">

							</ul>
						</div>
					</div>

				</div>
				<div class="cen-bottom"
					style="float: left; width: 45%; margin-left: 3%">
					<div class="title">中草药价格</div>
					<img src="img/bj-1.png" alt="" class="bj-1"> <img
						src="img/bj-2.png" alt="" class="bj-2"> <img
						src="img/bj-3.png" alt="" class="bj-3"> <img
						src="img/bj-4.png" alt="" class="bj-4">
					<div class="panel-heading row">
						<div class="col-md-4 tt">名称</div>
						<div class="col-md-4 tt">价格</div>
						<div class="col-md-4 tt">日期</div>
					</div>
					<div class="txtMarquee-top">
						<div class="hd">
							<a class="next"></a> <a class="prev"></a>
						</div>
						<div class="bd">
							<ul class="infoList" id="zcy">

							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="con-right fr">
				<div class="right-top">
					<div class="title">种植种类统计</div>
					<img src="img/bj-1.png" alt="" class="bj-1"> <img
						src="img/bj-2.png" alt="" class="bj-2"> <img
						src="img/bj-3.png" alt="" class="bj-3"> <img
						src="img/bj-4.png" alt="" class="bj-4">
					<div id="echarts_4" class="charts"></div>
				</div>
				<div class="right-center">
					<div class="title">养殖种类统计</div>
					<img src="img/bj-1.png" alt="" class="bj-1"> <img
						src="img/bj-2.png" alt="" class="bj-2"> <img
						src="img/bj-3.png" alt="" class="bj-3"> <img
						src="img/bj-4.png" alt="" class="bj-4">
					<div id="echarts_5" class="charts"></div>
				</div>
				<div class="right-bottom">
					<div class="title">产销统计</div>
					<img src="img/bj-1.png" alt="" class="bj-1"> <img
						src="img/bj-2.png" alt="" class="bj-2"> <img
						src="img/bj-3.png" alt="" class="bj-3"> <img
						src="img/bj-4.png" alt="" class="bj-4">
					<div id="echarts_6" class="charts"></div>
				</div>
			</div>
		</div>
	</div>

</body>
<script src="http://api.datashang.com/lib/encrty.js"></script>
<script src="static/jquery/jquery-2.1.1.min.js"></script>
<script src="static/echarts.min.js"></script>
<script src="static/yunnan.js"></script>
<script src="static/axios.js"></script>
<script src="static/vue/vue.js"></script>
<script type="text/javascript" src="js/config.js"></script>
<script src="js/func/data.js"></script>
<script src="js/yunNanMap/yunNanMap.js"></script>
<script type="text/javascript"
	src="static/jquery/jquery.SuperSlide.2.1.1.js"></script>
<script src="static/swiper-4.3.3/dist/js/swiper.min.js"></script>
<script type="text/javascript">
	
	var swiper = new Swiper('.swiper-container', {
	     spaceBetween: 30,
	      centeredSlides: true,
	      pagination : {
				el : '.swiper-pagination',
				clickable : true,

			},
	      autoplay: {
	        delay: 2500,
	        disableOnInteraction: false,
	      },
			/* 	navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				}, */

	});
	
</script>
</html>